<template>
    <div class="bx-editor">
        <van-nav-bar title="产品配置" left-text="返回" left-arrow border fixed @click-left="$router.go(-1)" />
        <div style="height:50px"></div>
        <van-cell-group>
            <div class="radio">
                <div><span style="color: #ee0a24">*</span>教育方向选择</div>
                <van-radio-group v-model="edu_direction">
                    <van-radio :name="1" checked-color="#366cb3">学历</van-radio>
                    <van-radio :name="2" checked-color="#366cb3">技能</van-radio>
                </van-radio-group>
            </div>
            <van-field readonly clickable required label="产品选择" :value="goodsName " placeholder="--请选择--" @click="goodsPicker = true" />
            <van-field v-model="price" label="学费" placeholder="请输入学费" size="large" required />
            <van-field readonly clickable required label="报名时间" :value="timeTurn(edu_enter_time)" placeholder="--请选择--" @click="timePop1 = true" right-icon="clock-o" />
            <van-field readonly clickable required label="开始学习时间" :value="timeTurn(start_time)" placeholder="--请选择--" @click="timePop2 = true" right-icon="clock-o" />
            <van-field readonly clickable required label="结束学习时间" :value="timeTurn(over_time)" placeholder="--请选择--" @click="timePop3 = true" right-icon="clock-o" />
            <van-field readonly clickable required label="毕业/领证时间" :value="timeTurn(end_time)" placeholder="--请选择--" @click="timePop4 = true" right-icon="clock-o" />
            <van-field readonly clickable required label="学习标准" :value="edu_standard" placeholder="--请选择--" @click="learnNormPicker = true" />
            <van-field readonly clickable required label="报考级别" :value="edu_level" placeholder="--请选择--" @click="examRankPicker = true" />
            <van-field  label="前置学历" v-model="edu_education" placeholder="请输入前置学历" size="large" required />
            <div class="radio">
                <div><span style="color: #ee0a24">*</span>学位申请</div>
                <van-radio-group v-model="edu_degree">
                    <van-radio :name="1" checked-color="#366cb3">是</van-radio>
                    <van-radio :name="0" checked-color="#366cb3">否</van-radio>
                </van-radio-group>
            </div>
            <div class="radio">
                <div><span style="color: #ee0a24">*</span>是否通过</div>
                <van-radio-group v-model="edu_pass">
                    <van-radio :name="1" checked-color="#366cb3">是</van-radio>
                    <van-radio :name="0" checked-color="#366cb3">否</van-radio>
                </van-radio-group>
            </div>
        </van-cell-group>

        <van-popup v-model="goodsPicker" position="bottom">
            <van-picker show-toolbar value-key="name" :columns="goodsList" @cancel="goodsPicker = false" @confirm="onGoodsSelect" />
        </van-popup>
        <van-popup v-model="learnNormPicker" position="bottom">
            <van-picker show-toolbar :columns="learnNormList" @cancel="learnNormPicker = false" @confirm="onLearnNorm" />
        </van-popup>
        <van-popup v-model="examRankPicker" position="bottom">
            <van-picker show-toolbar :columns="examRankList" @cancel="examRankPicker = false" @confirm="onExamRank" />
        </van-popup>
        <!-- 报名时间 -->
        <van-popup v-model="timePop1" position="bottom">
            <van-datetime-picker v-model="timeVal1" type="date" :min-date="minDate" @cancel="timePop1 = false" @confirm="timeConfirm(1)" />
        </van-popup>
        <!-- 开始学习时间 -->
        <van-popup v-model="timePop2" position="bottom">
            <van-datetime-picker v-model="timeVal2" type="date" :min-date="minDate" @cancel="timePop2 = false" @confirm="timeConfirm(2)" />
        </van-popup>
        <!-- 结束学习时间 -->
        <van-popup v-model="timePop3" position="bottom">
            <van-datetime-picker v-model="timeVal3" type="date" :min-date="minDate" @cancel="timePop3 = false" @confirm="timeConfirm(3)" />
        </van-popup>
        <!-- 毕业/领证时间 -->
        <van-popup v-model="timePop4" position="bottom">
            <van-datetime-picker v-model="timeVal4" type="date" :min-date="minDate" @cancel="timePop4 = false" @confirm="timeConfirm(4)" />
        </van-popup>
        <div class="foot-btn">
            <div class="blue-btn" @click="pushInfo()" >添加配置</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "jyProdectConfig",
    data() {
        return {
            studyDate: new Date(),
            studyPop: false,
            graduateDate: new Date(),
            graduatePop: false,
            minDate: new Date(1970, 0, 1),

            edu_direction: 1,// 教育方向选择

            goodsIndex: '',//  产品index
            goodsName: '',//  产品名称
            price: '',//  学费


            timePop1: false,
            timeVal1: new Date(),
            edu_enter_time: new Date(),//  报名时间	

            timePop2: false,
            timeVal2: new Date(),
            start_time: new Date(),//  开始学习时间	

            timePop3: false,
            timeVal3: new Date(),
            over_time: new Date(),//  结束学习时间		

            timePop4: false,
            timeVal4: new Date(),
            end_time: new Date(),//  毕业/领证时间		

            edu_standard: '',//  学习标准	
            edu_level: '',// 报考级别

            edu_education: '',// 前置学历

            edu_degree: 1,// 学位申请
            edu_pass: 1,// 学位申请





            goodsPicker: false,
            goodsValue: '',
            goodsList: [],

            learnNormPicker: false,
            learnNormValue: '',
            learnNormList: [],

            examRankPicker: false,
            examRankValue: '',
            examRankList: [],

            educationBG: '',

            isPassRadio: '1',
        };
    },
    methods: {
        getInfo() {
            let params = {
                wx_member_id: localStorage.getItem('wx_member_id'),
                token: localStorage.getItem('token'),
                cate_id: this.$route.query.type,
            };
            this.$post("/api/member_goods/get_product", params)
                .then(res => {
                    if (res.code == 1) {
                        this.goodsList = res.data.goods
                        this.learnNormList = res.data.edu_standard_list
                        this.examRankList = res.data.edu_level_list
                    } else {
                        this.$Toast(res.msg);
                    }
                })
                .catch(err => { });

        },
        timeTurn(val) {
            return this.$formatDateTime(val, 'yyyy-MM-dd');
        },
        timeConfirm(type) {
            if(type == 1){
                this.edu_enter_time = this.timeVal1
                this.timePop1 = false
            }
            if(type == 2){
                this.start_time = this.timeVal2
                this.timePop2 = false
            }
            if(type == 3){
                this.over_time = this.timeVal3
                this.timePop3 = false
            }
            if(type == 4){
                this.end_time = this.timeVal4
                this.timePop4 = false
            }
        },
        onGoodsSelect(value,index) {
            console.log(index)
            this.goodsIndex = index;
            this.goodsName = value.name;
            this.goodsPicker = false;
        },
        // 学习标准
        onLearnNorm(value,index) {
            // this.learnNormValue = value;
            this.edu_standard = value;
            this.learnNormPicker = false;
        },
        // 报考级别
        onExamRank(value) {
            // this.examRankValue = value;
            this.edu_level = value;
            this.examRankPicker = false;
        },
        // 保存信息
        pushInfo() {
            console.log(this.goodsIndex )
            console.log(!this.goodsName)
            if(!this.goodsName){
                this.$Toast('请选择产品');
                return;
            }
            if(!this.price){
                this.$Toast('请输入学费');
                return;
            }
            if(!this.edu_standard){
                this.$Toast('请选择学习标准');
                return;
            }
            if(!this.edu_level){
                this.$Toast('请选择报考级别');
                return;
            }  
             if(!this.edu_education){
                this.$Toast('请输入前置学历');
                return;
            }
            let params = {
                wx_member_id: localStorage.getItem('wx_member_id'),
                token: localStorage.getItem('token'),
                cate_id: this.$route.query.type,

                edu_direction: this.edu_direction,
                goods_id: this.goodsList[this.goodsIndex].id,
                price: this.price,
                edu_enter_time: this.timeTurn(this.edu_enter_time),
                start_time: this.timeTurn(this.start_time),
                over_time: this.timeTurn(this.over_time),
                end_time: this.timeTurn(this.end_time),
                edu_standard:this.edu_standard,
                edu_level: this.edu_level,
                edu_education: this.edu_education,
                edu_degree: this.edu_degree,
                edu_pass: this.edu_pass,
            };
            this.$post("/api/member_goods/save_product", params)
                .then(res => {
                    if (res.code == 1) {
                        this.$Toast(res.msg);
                       setTimeout(() => {
                            this.$router.go(-1)
                        }, 1500);
                    } else {
                        this.$Toast(res.msg);
                    }
                })
                .catch(err => { });
        },
    },
    created() {
        // 实例创建完成
        this.getInfo();
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#fff");
    }
}
</script>

<style scoped lang='less'>
.radio {
    display: flex;
    align-items: center;
    padding: 10px;

    div:nth-of-type(1) {
        width: 126px;
        font-size: 14px;
    }
}
</style>